<template>
  <view class="home-page relative w-full">
    <wd-backtop :scrollTop="recordScrollTop" :duration="0" custom-class="scroll-top" @tap="goTop" />
    <scroll-view
      :scroll-top="scrollTop"
      scroll-y
      class="h-full"
      :scroll-with-animation="true"
      @scrolltolower="onRefresh"
      @scroll="scroll"
    >
      <wd-swiper v-model:current="current" :list="swiperList" />
      <view class="w-full mt-2">
        <wd-button type="info" block :round="false" size="large">
          {{ officialLinkTitle }}</wd-button
        >
      </view>

      <view class="gallery-list w-full relative mt-4 box-border">
        <wd-divider content-position="left" custom-class="divider"> 灵感画廊 </wd-divider>

        <view @tap="goToSearch"><wd-search hide-cancel disabled /></view>

        <view class="w-full flex justify-center text-[#4c4c4c] text-[28rpx]">
          <view
            v-for="item in optionsList"
            :key="item"
            class="py-1 px-2 item"
            :class="item === currentOptions ? 'item-active' : ''"
            @tap="onChangeType(item)"
          >
            {{ item }}
          </view>
        </view>

        <!-- 灵感画廊瀑布流 -->
        <view class="w-full mt-2">
          <waterfall-flow :items="imageList" :columns="2" :gutter="10" @itemClick="goCardDetail" />

          <wd-status-tip v-if="!imageList?.length" image="search" tip="当前搜索无结果" />
          <!-- 加载状态 -->
          <view v-else class="flex justify-center wt-4">
            <wd-loading v-if="loading" :size="20" color="#c13432" />
            <text v-if="loading" class="loading-text">加载中...</text>
            <text v-else-if="noMore" class="loading-text">没有更多了</text>
            <text v-else class="loading-text">上拉加载更多</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import Banner from "@/static/banner.png";
import UseGalleryList from "@/hooks/useGalleryList";
import WaterfallFlow from "@/components/WaterfallFlow.vue";
import type { WaterfallItem } from "@/hooks/useWaterfallFlow";
import UseBackTop from "@/hooks/useBackTop";

const current = ref<number>(0);
const swiperList = ref([Banner]);

// 回到顶部
const { scrollTop, recordScrollTop, scroll, goTop } = new UseBackTop();

const officialLinkTitle = ref("AidMaster图灵 官方经验分享");

// 灵感画廊
const { queryGalleryList, optionsList, currentOptions, pageOptions, loading, galleryList, noMore } =
  new UseGalleryList();
queryGalleryList();

// 去搜索界面
const goToSearch = () => uni.navigateTo({ url: "/pages/searchGallery/index" });

// 瀑布流图片
const imageList = computed(() => {
  return galleryList.value.map((item) => {
    return {
      url: item.aidImageList[0].thumbnailUri,
      id: item.id,
      width: item.aidImageList[0].width,
      height: item.aidImageList[0].height,
      title: item.userName,
      avatar: item.avatar,
      way: JSON.parse(item.createVariable).way,
    };
  });
});

// 切换类型
const onChangeType = (type: string) => {
  currentOptions.value = type;
  pageOptions.value.pageNum = 1;
  queryGalleryList();
};

const onRefresh = () => {
  if (loading.value || noMore.value) return;
  pageOptions.value.pageNum++;
  queryGalleryList(false);
};

// go卡片详情
const goCardDetail = (item: WaterfallItem) =>
  uni.navigateTo({ url: `/pages/creationDetails/index?id=${item.id}` });
</script>

<style lang="scss" scoped>
.home-page {
  height: 100vh;
  overflow-x: hidden;
  :deep(.divider) {
    margin-bottom: 0 !important;
  }
  .item-active {
    @apply text-[#c13432];
    text-shadow:
      0.5px 0 0 #c13432,
      -0.5px 0 0 #c13432;
    transform: scale(1.05);
  }
  .item {
    transition: all 0.2s linear;
  }
  .loading-text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>
